<template>
	<view class="header"></view>
	<view class="content" :style="{ paddingTop: headerBarHeight + 'px' }">
		<view class="title">登录</view>
		<view class="logo_view">
			<image src="@/static/home/view.png" class="view_image"></image>
			<text class="welcome">欢迎来到物流识别平台</text>
		</view>

		<view class="form_view">
			<view class="item">
				<view class="label">账号</view>
				<input type="text" v-model="form.account" placeholder="请输入账号" class="input">
			</view>
			<view class="item">
				<view class="label">密码</view>
				<input type="text" v-model="form.password" placeholder="请输入密码" password class="input">
			</view>
		</view>
		<view class="btn" @click="click_login">登录</view>
	</view>

	<view class="footer">
		<view class="explain" @click="checked=!checked">
			<image src="@/static/home/checked.png" v-if="checked"></image>
			<image src="@/static/home/check_no.png" v-else></image>
			<view class="tips">
				<text>我已阅读并同意</text>
				<text class="desc" @click.stop="router('/pagesB/setting/article?key=user_agree')">《用户协议》</text>
				<text>和</text>
				<text class="desc" @click.stop="router('/pagesB/setting/article?key=privacy_policy')">《隐私政策》</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import useStore from "@/store/index.js";

	import useBase from "@/hooks/useBase.js";

	import {
		login
	} from "@/util/request/api.js";

	const {
		useLoginStore
	} = useStore();

	const {
		router
	} = useBase();

	const checked = ref(false);
	const headerBarHeight = ref(0);
	onLoad(() => {
		const {
			statusBarHeight,
			safeAreaInsets
		} = uni.getSystemInfoSync();
		headerBarHeight.value = safeAreaInsets?.top || statusBarHeight;
	});

	// const form = reactive({
	// 	account: "lisi",
	// 	password: "123456"
	// })
	const form = reactive({
		account: "",
		password: ""
	});
	const click_login = async () => {
		if (!checked.value) {
			uni.$uv.toast("请阅读《用户协议》和《隐私政策》")
			return
		}
		let {
			userinfo
		} = await login(form);
		useLoginStore.changeUserinfo(userinfo)
		router('/pages/tabbar/home')
	}
</script>

<style lang="scss" scoped>
	.header {
		width: 100%;
		height: 750rpx;
		box-sizing: border-box;
		background: url(@/static/home/login.png) no-repeat;
		background-size: 100% 100%;
		position: fixed;
		top: 0;
		left: 0;
	}

	.content {
		padding: 0 60rpx;
		box-sizing: border-box;
		position: relative;
		z-index: 99;

		.title {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			color: #1C2023;
			font-size: 32rpx;
			font-weight: bold;
			box-sizing: content-box;
		}

		.logo_view {
			display: flex;
			flex-direction: column;
			align-items: center;

			.view_image {
				width: 360rpx;
				height: 360rpx;
			}

			.welcome {
				line-height: 36rpx;
				color: #333333;
				font-size: 36rpx;
				font-weight: 600;
			}
		}

		.form_view {
			margin-top: 90rpx;

			.item {
				padding-bottom: 60rpx;
				box-sizing: border-box;

				.label {
					height: 32rpx;
					line-height: 32rpx;
					color: #333333;
					font-size: 32rpx;
					font-weight: 400;
					padding-bottom: 30rpx;
					box-sizing: content-box;
				}

				.input {
					height: 88rpx;
					line-height: 1;
					color: #999999;
					font-size: 28rpx;
					font-weight: 400;
					border-radius: 15rpx;
					padding-left: 30rpx;
					box-sizing: border-box;
					background: #F7F7F7;
				}
			}
		}

		.btn {
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			color: #FFFFFF;
			font-size: 28rpx;
			font-weight: 600;
			box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 92, 255, 0.3);
			border-radius: 15rpx;
			margin-top: 30rpx;
			background: #2282FC;
		}
	}

	.footer {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 20rpx;
		z-index: 2;

		.explain {
			display: flex;
			// justify-content: flex-start;
			justify-content: center;
			align-items: center;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
			}

			.tips {
				color: #999;
				font-size: 28rpx;
				font-weight: 400;

				.desc {
					color: #2282FC;
				}
			}
		}
	}
</style>